<template>
    <div class="role-type">
        <el-dialog width="45%" :title="'角色菜单'" :visible.sync="dialogVisible">
            <div class="radio-list">
                <el-radio-group v-model="radioValue" @change="initData()">
                    <el-radio 
                        v-for="(item,index) in authorityList" 
                        :key="index" 
                        :label="item.id"
                    >{{item.name}}</el-radio>
                </el-radio-group>                
            </div>
            <el-table 
                border
                :data="tableData"
                size="mini"
                style="width: 100%"
                v-loading="tableLoading"
            >
                <el-table-column property="name" label="菜单名称">
                    <template slot-scope="scope">
                        <el-input size="mini"
                            v-model="scope.row.name" 
                            placeholder="请输入内容">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="分组">
                    <template slot-scope="scope">
                        <span>{{scope.row.group == "daliyMaintain" ? "日常运维" : "管理工具"}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="排序">
                    <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.order" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            class="edig-text"
                            v-if="radioValue != 'ROLE_SUPERADMIN'"
                            @click="deletethis(scope.$index,scope.row)"
                        >删除</el-button>
                        <el-button
                            type="text"
                            class="edig-text"
                            @click="submitScopeData(scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer" v-if="radioValue != 'ROLE_SUPERADMIN'">
                <el-button size="mini" type="primary" @click="addMenuList()">新增菜单</el-button>
            </span>
            <el-dialog
                width="30%"
                title="新增菜单"
                class="add-parduser"
                :visible.sync="addVisible"
                append-to-body
            >
                <el-table 
                    border
                    :data="Csudata"
                    size="mini"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column property="name" label="菜单名称">
                        <template slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="分组">
                        <template slot-scope="scope">
                        <span>{{scope.row.group == "daliyMaintain" ? "日常运维" : "管理工具"}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column label="排序">
                        <template slot-scope="scope">
                            <span>{{scope.row.order}}</span>
                            <!-- <el-input size="mini" v-model="scope.row.order" placeholder="请输入内容"></el-input> -->
                        </template>
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button size="mini" type="primary" @click="conformData()">确 定</el-button>
                </span>
            </el-dialog>
        </el-dialog>
    </div>
</template>
<script>
import Vue from "vue";
import { alertMessage } from "@/config/myUtil";
import { Radio , RadioGroup,Table ,TableColumn } from "element-ui";
import { getroleAuthData , addRoleAuthorityeData ,updateAuthorityResourceData ,deleteauthorityResourceData} from "@/api/getData";
Vue.use(Radio);
Vue.use(Table);
Vue.use(RadioGroup);
Vue.use(TableColumn);
export default {
    name:"RoleType",
    props:{
        authorityList:{
            type:Array,
            default:[],
        }
    },
    data(){
        return {
            Csudata:[],
            superData:[],
            tableData:[],
            addVisible:false,
            dialogVisible:false,
            tableLoading:false,
            radioValue:"ROLE_SUPERADMIN",
            multipleSelection:[]
        }
    },
    mounted(){
        this.initData();
    },
    methods:{
        changeStatus(){
            this.dialogVisible = true;
        },
        async initData(){
            try {
                this.tableLoading = true;
                let data = await getroleAuthData({authorityId:this.radioValue});
                if(this.radioValue == "ROLE_SUPERADMIN"){
                    this.superData = data;
                }
                this.tableData = data;
                this.tableLoading = false;
            } catch (error) {
                console.log(error);
                this.tableLoading = false;
            }
        },
        async sureSubmit(datas){
            try {
                let data = await addRoleAuthorityeData(datas);
                if(data == 1){
                    this.addVisible = false;
                    this.initData();
                    this.multipleSelection = [];
                }
            } catch (error) {
                console.log(error)
            }
        },
        async submitScopeData(item){
            try {
                var avl = JSON.parse(JSON.stringify(item));
                delete avl.attributes;
                delete avl.authority;
                delete avl.attribute;
                avl.authorityId = item.attribute;
                let data = await updateAuthorityResourceData(avl);
                if(data == 1){
                    alertMessage("保存成功");
                    this.initData();
                }
            } catch (error) {
                console.log(error);
            }
        },
        async deleteOneData(index,row){
            try {
                let data = await deleteauthorityResourceData({
                    roleId:this.radioValue,
                    resourceId:row.id
                });
                if(data == 1){
                    this.tableData.splice(index,1);
                }else{
                    alertMessage("删除失败！","error")
                }
            } catch (error) {
                console.log(error)
            }
        },
        deletethis(index,row){
            this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteOneData(index,row)
            }).catch(() => {});
        },
        conformData(){
            var list = this.multipleSelection;
            var newList = [],
            pass = true,name = ""
            list.map((item)=>{
                this.tableData.map((el)=>{
                    if(el.url == item.url){
                        pass = false;
                        name = item.name;
                    }
                })
                newList.push({
                    roleId:this.radioValue,
                    resourceId: item.id,
                })
            });
            if(pass){
                this.sureSubmit(newList);
            }else{
                alertMessage(`${name} 模块已经存在！`,"warning")
            }
        },
        submitForm(){
            let list = this.tableData;
            if(list.length == 0){
                this.dialogVisible = false;
                return
            }
            list.map((item)=>{
                item.id = null;
                item.attributes = null;
            })
            this.sureSubmit(list);
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        addMenuList(){
            this.Csudata = JSON.parse(JSON.stringify(this.superData))
            this.addVisible = true;
            this.multipleSelection = [];
        }
    }
}
</script>
<style lang="less" scoped>
@import url("../less/roletype.less");
</style>